<main class="app-content">
  <div class="searchBox mb-4">
    <div class="w-60">
      <span *ngIf="isAdmin" class="btn-style" (click)="onopenAdd()">新建转移单</span>
    </div>
    <div class="w-40 input-group searchStyle">
      <input type="text" class="form-control" placeholder="请输入转移单号" [(ngModel)]="deliver.deliverNum" name="deliverNum">
      <div class="input-group-append">
        <button class="btn btn-outline-secondary" type="button" (click)="search()"><i class="fa fa-search"></i></button>
      </div>
      <!--<span class="ml-2 cursor" (click)="appearSearchbox()" >高级搜索</span>-->
    </div>
  </div>

  <div>
    <li class="mb-3 list-title">转移列表</li>
  </div>
  <div class="tables">
    <div class="grid">
      <div class="left-table">
        <table mat-table [dataSource]="delivers | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">
          <ng-container matColumnDef="deliverNum">
            <th mat-header-cell *matHeaderCellDef>转移单号</th>
            <td mat-cell *matCellDef="let row " [id]="row.deliverNum">{{ row.deliverNum }}</td>
          </ng-container>

          <ng-container matColumnDef="createDate">
            <th mat-header-cell *matHeaderCellDef>转移时间</th>
            <td mat-cell *matCellDef="let row">{{ row.deliverDate |  date: 'yyyy-MM-dd'}}</td>
          </ng-container>

          <ng-container matColumnDef="newuser">
            <th mat-header-cell *matHeaderCellDef>转移后使用人</th>
            <td mat-cell *matCellDef="let row">{{ row.sysUser?.realName }}</td>
          </ng-container>

          <ng-container matColumnDef="newdepartment">
            <th mat-header-cell *matHeaderCellDef>转移后使用部门</th>
            <td class="overWords" mat-cell *matCellDef="let row ">{{ row.sysDepartment?.departName }}</td>
          </ng-container>
          <!--对应列名List.ts中定义-->
          <tr mat-header-row *matHeaderRowDef="colsone"></tr>
          <tr mat-row *matRowDef="let data; columns: colsone"></tr>
        </table>
      </div>
      <div class="right-table">
        <table mat-table [dataSource]="delivers | paginate: {itemsPerPage: pageSize, currentPage: page, totalItems: total}" [trackBy]="trackById" class="table-bordered">
          <ng-container matColumnDef="address">
            <th mat-header-cell *matHeaderCellDef>转移后使用地</th>
            <td mat-cell *matCellDef="let row">{{ row.address }}</td>
          </ng-container>

          <ng-container matColumnDef="deliverUser">
            <th mat-header-cell *matHeaderCellDef>转移处理人</th>
            <td mat-cell *matCellDef="let row">{{ row.deliverUser.realName }}</td>
          </ng-container>

          <ng-container matColumnDef="deliverremark">
            <th mat-header-cell *matHeaderCellDef>转移备注</th>
            <td class="overWords" mat-cell *matCellDef="let row">{{ row.remark }}</td>
          </ng-container>

          <ng-container matColumnDef="assetCode">
            <th mat-header-cell *matHeaderCellDef>资产编码</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.assetCode}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetName">
            <th mat-header-cell *matHeaderCellDef>资产名称</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.assetName}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetType">
            <th mat-header-cell *matHeaderCellDef>资产类别</th>
            <td mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.oaAssetType?.GDZCLBMC}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="source">
            <th mat-header-cell *matHeaderCellDef>来源</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                <span *ngIf="item.source === '0'">自购</span>
                <span *ngIf="item.source === '1'">租赁</span>
                <span *ngIf="item.source === '2'">借用</span>
                <span *ngIf="item.source === '3'">其他</span>
                <span *ngIf="item.source === '4'">自产</span>
                <span *ngIf="item.source === '5'">赠送</span>
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="version">
            <th mat-header-cell *matHeaderCellDef>型号</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.assetVersion}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="olddepartment">
            <th mat-header-cell *matHeaderCellDef>转移前使用部门</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.sysDepartment.departName}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="olduser">
            <th mat-header-cell *matHeaderCellDef>转移前使用人</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.sysUser.realName}}
              </div>
            </td>
          </ng-container>


          <ng-container matColumnDef="sourceComefrom">
            <th mat-header-cell *matHeaderCellDef>渠道</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.sourceComefrom}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetPrice">
            <th mat-header-cell *matHeaderCellDef>金额</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.assetPrice}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="buyDate">
            <th mat-header-cell *matHeaderCellDef>购入日期</th>
            <td mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.buyDate | date: 'yyyy-MM-dd'}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="snNum">
            <th mat-header-cell *matHeaderCellDef>SN号</th>
            <td class="overWords" mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.snNum}}
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="assetImg">
            <th mat-header-cell *matHeaderCellDef>图片</th>
            <td mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                <img *ngIf="item.assetImgUrl1" class="assetImg" [src]="item.assetImgUrl1" alt="" >
              </div>
            </td>
          </ng-container>

          <ng-container matColumnDef="remark">
            <th mat-header-cell *matHeaderCellDef>资产备注</th>
            <td mat-cell *matCellDef="let row">
              <div class="tdStyle" *ngFor="let item of row.list">
                {{item.remark}}
              </div>
            </td>
          </ng-container>

          <!--对应列名List.ts中定义-->
          <tr mat-header-row *matHeaderRowDef="colstwo"></tr>
          <tr mat-row *matRowDef="let data; columns: colstwo"></tr>
        </table>
      </div>
    </div>
  </div>

  <app-pagination
    (pageChange)="onPageChanged($event)"
    [maxSize]="9"
    [isShowInput]="true"
    [isShowPage]="true"
    [isMiniMode]="false"
    [total]="total"
  >
  </app-pagination>
</main>
<div *ngIf="appearSearch" class="superBox">
  <div class="modalContent">
    <label>高级搜索</label>
    <div class="assetusemsg">
      <div class="form-group w-50">
        <label class="mr-2 w-25">资产名称</label>
        <input required class="form-control mr-2 w-60" type="text"  placeholder="资产名称" [(ngModel)]="asset.assetName" name="assetName">
      </div>
      <div class="form-group w-50 dropdown">
        <label class="mr-2 w-25">资产类别</label>
        <input autocomplete="off" required class="form-control mr-2 w-60" type="text"  placeholder="输入资产类别"  [(ngModel)]="assettypeName" (click)="showtypeTree()" name="assettypeName">
        <tree-root class="treemenu" *ngIf="typetree" [nodes]="nodes" [options]="options" tabindex=100 (blur)="hidetree()"></tree-root>
      </div>
      <div class="form-group w-50">
        <label class="mr-2 w-25">座位号</label>
        <input required class="form-control mr-2 w-60" type="text"  placeholder="座位号" [(ngModel)]="asset.position" name="position">
      </div>
      <div class="form-group  w-50">
        <label class="mr-2 w-25">领用部门</label>
        <select required class="form-control mr-2 w-60" type="text" [(ngModel)]="asset.sysDepartment.id" name="departmentid" (ngModelChange)="changeDepartment($event)">
          <option *ngFor="let department of departments" [value]="department.id">
            {{department.departName}}
          </option>
        </select>
      </div>
      <div class="form-group  w-50">
        <label class="mr-2 w-25">领用人</label>
        <select  class="form-control mr-2" type="text"  [(ngModel)]="asset.sysUser.id" name="userid">
          <option *ngFor="let user of users" [value]="user.id">
            {{user.username}}
          </option>
        </select>
      </div>
      <div class="form-group w-100">
        <label class="mr-3" style="width: 10% !important;;">领用日期</label>
        <input style="width: 38%" class="form-control" type="text"  (click)="beginDate.open()" [max]="endCtrl.value" (ngModelChange)="onSwitchDate($event)" [formControl]="beginCtrl" placeholder="选择开始日期" [matDatepicker]="beginDate" readonly>
        <mat-datepicker #beginDate></mat-datepicker>
        -
        <input style="width: 37%" class="form-control" type="text"  (click)="endDate.open()" [min]="beginCtrl.value" (ngModelChange)="onSwitchDate($event)" [formControl]="endCtrl" placeholder="选择截止日期" [matDatepicker]="endDate" readonly>
        <mat-datepicker #endDate></mat-datepicker>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" (click)="bigsearch()">搜索</button>
      <button type="button" class="btn btn-secondary" (click)="reset()">重置</button>
      <button type="button" class="btn btn-danger"  (click)="closesearch()">关闭</button>
    </div>
  </div>
</div>
